<template>
  <div class="activity">
    <!-- 表格 -->
    <el-card class="formTable">
      <!-- //新增按钮 -->
      <div class="addBtn">
        <el-button size="mini" type="primary" @click="openInner"
          >新增</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border size="small">
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column
            label="序号"
            fixed="left"
            type="index"
            align="center"
          />
          <el-table-column label="商品图片" align="center" width="140px">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.pic"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="活动时间"
            prop="name"
            align="center"
            width="240px"
          >
            <template slot-scope="scope">
              <div class="start">
                开始时间:{{ scope.row.promotionStartTime }}
              </div>
              <div class="end">结束时间:{{ scope.row.promotionEndTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="是否过期" prop="name" align="center">
            <template slot-scope="scope">
              {{ scope.row.publishStatus == 0 ? '否' : '过期' }}
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="name"
            align="center"
            width="300px"
          />
          <el-table-column
            label="商品品牌"
            prop="brandName"
            align="center"
            width="130px"
          />
          <el-table-column label="商品价格" align="center" width="120px">
            <template slot-scope="scope">
              <div class="start">
                商品价格:<span style="text-decoration: line-through">{{
                  scope.row.price
                }}</span>
              </div>
              <div class="end">
                促销价格:
                <span style="color: #f00"> {{ scope.row.promotionPrice }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="限购数量"
            prop="promotionPerLimit"
            align="center"
            width="120px"
          />
          <el-table-column
            label="商品类型"
            prop="productCategoryName"
            align="center"
            width="120px"
          />
          <el-table-column
            label="上架时间"
            prop="createTime"
            align="center"
            width="200px"
          />
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="150px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.recommendId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-card>
      </el-table>
    </el-card>
    <!-- 新增层 -->
    <el-drawer
      class="innerTable"
      title="添加热销商品"
      size="50%"
      :visible.sync="drawer"
      direction="ttb"
    >
      <div class="main_body">
        <!-- <el-button @click="innerDrawer = true">打开里面的!</el-button> -->
        <!-- 搜索栏 -->
        <el-card class="searchBar" shadow="never">
          <div class="searchBar-title">查询条件</div>
          <el-form
            ref="form"
            :inline="true"
            :model="searchForm"
            class="demo-form-inline"
            size="mini"
          >
            <el-form-item>
              <el-input
                v-model="searchForm.name"
                placeholder="商品名称/模糊查询"
              />
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.productSn" placeholder="商品货号" />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.brandId"
                placeholder="品牌"
                clearable
              >
                <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.publishStatus"
                clearable
                placeholder="上架状态"
              >
                <el-option label="上架" value="1" />
                <el-option label="未上架" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.verifyStatus"
                clearable
                placeholder="审核"
              >
                <el-option label="未审核" value="0" />
                <el-option label="审核" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="onSearch"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <!-- 内层表格 -->
        <el-table
          :data="productList"
          style="width: 100%; margin: 30px auto 0"
          height="600"
          border
          size="mini"
        >
          <el-card>
            <el-card class="main-header" shadow="never" />
            <el-table-column
              label="序号"
              fixed="left"
              type="index"
              align="center"
            />
            <el-table-column label="商品图片" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 60px; height: 60px"
                  :src="scope.row.pic"
                />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="name" align="center" />
            <el-table-column label="商品价格" align="center">
              <template slot-scope="scope">
                <div class="start">
                  商品价格:<span style="text-decoration: line-through">{{
                    scope.row.price
                  }}</span>
                </div>
                <div class="end">
                  促销价格:
                  <span style="color: #f00">
                    {{ scope.row.promotionPrice }}</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="商品重量"
              prop="promotionPerLimit"
              align="center"
            />
            <el-table-column
              label="商品类型"
              prop="productCategoryName"
              align="center"
            />
            <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="openInnerEdit(scope.row)"
                  >加入限时活动</el-button
                >
              </template>
            </el-table-column>
          </el-card>
        </el-table>
        <!-- //分页 -->
        <div class="main-footer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="innerSizeChange"
            @current-change="innerCurrentChange"
          />
        </div>
      </div>
    </el-drawer>
    <!-- 编辑修改层 -->
    <el-drawer
      class="innerEdit"
      style="width: 30%; height: 1050px; margin: 120px auto"
      title="编辑限时活动"
      direction="ttb"
      size="50%"
      :append-to-body="true"
      :before-close="handleClose"
      :visible.sync="innerDrawer"
    >
      <el-form
        ref="productInfo"
        :model="productInfo"
        style="padding: 20px; margin-top: -20px"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="商品名称">
          <div class="productName">{{ productInfo.name }}</div>
        </el-form-item>
        <el-form-item label="商品原价">
          <div>{{ productInfo.price }}</div>
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="productInfo.promotionPrice" style="width: 120px" />
        </el-form-item>
        <el-form-item label="限购数量">
          <el-input
            v-model="productInfo.promotionPerLimit"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="商品排序">
          <el-input-number
            v-model="productInfo.sort"
            :min="1"
            :max="10"
            label="描述文字"
          />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="productInfo.promotionStartTime"
            type="datetime"
            format="yyyy-MM-dd HH-mm-ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="productInfo.promotionEndTime"
            type="datetime"
            format="yyyy-MM-dd HH-mm-ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item size="small">
          <el-button type="primary" @click="addRecommend">{{
            isModify ? '立即修改' : '立即新增'
          }}</el-button>
          <el-button @click="handleClose">{{
            isModify ? '取消修改' : '取消新增'
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { productsByPage } from '@/api/product/index'
import {
  findAllRecommends,
  delRecommend,
  addRecommend,
  updateRecommend
} from '@/api/market/index'
import { findAllBrand } from '@/api/commodities/brandList/index'
import mixins from '@/mixins/index'
export default {
  mixins: [mixins],
  data() {
    return {
      tableData: [],
      productList: [],
      searchForm: {},
      drawer: false,
      innerDrawer: false,
      currentPage: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 40],
      total: 0,
      brandList: [],
      productInfo: {},
      isModify: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findAllRecommends().then((res) => {
        this.page.total = res.data.items.length
        this.tableData = res.data.items
      })
    },
    // 外层表格删除
    handleDelete(id) {
      this.delData(id, delRecommend)
    },
    // 外层修改
    handleEdit(val) {
      // isModify控制按钮字体
      this.isModify = true
      this.innerDrawer = true
      this.productInfo = val
    },
    // 打开遮罩层,获取表格数据
    openInner() {
      this.drawer = true
      productsByPage(this.currentPage, this.pageSize).then((res) => {
        this.total = res.data.total
        this.productList = res.data.rows
      })
      findAllBrand().then((res) => {
        this.brandList = res.data.items
      })
    },
    // 获得搜索后的数据
    onSearch() {
      // productList
      this.currentPage = 1
      productsByPage(this.currentPage, this.pageSize, this.searchForm).then(
        (res) => {
          this.total = res.data.total
          this.productList = res.data.rows
        }
      )
    },
    // 重置搜索框
    onReset() {
      this.searchForm = this.$options.data().searchForm
      this.onSearch()
    },
    // 内层表格大小变化
    innerSizeChange(val) {
      this.pageSize = val
      this.addActivity()
    },
    // 内层表格切换页数
    innerCurrentChange(val) {
      this.currentPage = val
      this.addActivity()
    },
    // 打开多层嵌套,编辑新增信息
    openInnerEdit(val) {
      this.innerDrawer = true
      this.productInfo.name = val.name
      this.productInfo.price = val.price
      this.productInfo.productId = val.id
    },
    // 添加或修改促销活动
    addRecommend() {
      if (this.isModify) {
        updateRecommend(this.productInfo).then((res) => {
          if (res.success) {
            this.$message.success('修改成功!')
            this.isModify = false
            this.innerDrawer = false
          } else {
            this.$message.error('修改失败!')
          }
        })
      } else {
        addRecommend(this.productInfo).then((res) => {
          if (res.success) {
            this.$message.success('添加成功!')
            this.isModify = false
            this.innerDrawer = false
            this.init()
          } else {
            this.$message.error('添加失败!')
          }
        })
      }
    },
    // 确认关闭
    handleClose(done) {
      this.$confirm('商品还未添加促销,是否退出?')
        .then((_) => {
          this.innerDrawer = false
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.activity {
  .innerTable {
    width: 80%;
    height: 1800px;
    margin: 20px auto;
    .main_body {
      width: 93%;
      margin: -20px auto 0;
      .searchBar {
        border: 1px solid #bebebe81;
        .demo-form-inline {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 30px 50px 0;
        }
      }
      .main-footer {
        margin-top: 10px;
      }
      .innerEdit {
        #el-drawer__title {
          margin-bottom: 10px;
        }
        width: 50%;
        margin: 0 auto;
      }
    }
  }
}
</style>
